<template>
  <div>
    <!-- <el-select v-model="userId" placeholder="请选择" @focus = "handleFocus">
        <el-option v-for="item in selectData" :key="item.F_UserId" :label="item.F_RealName" :value="item.F_UserId">
        </el-option>
    </el-select> -->
    <div class="departnames" @click="handleFocus">
        <div class="staff-info" v-if="selectData && selectData.length > 0">
            <a @click.stop="del" class="selected-people" 
                v-for="(item,index) in selectData" :key="index">
                    {{item.F_RealName}}<i slot="suffix" class="el-icon-close fontsize16"></i></a>
        </div>
        <div class="staff-info plachcholder-text" v-else>
            请选择
        </div>
        <div class="icon-jiantou">
            <img src="../../assets/flowlist/down_jiantou.png">
        </div>
    </div>

    <el-dialog title="请选择人员"
    :close-on-click-modal="false"
    append-to-body :visible.sync="dialogVisible" width="1118px" :before-close="handleClose">
        <div class="select-personal">
            <!-- 部门树 -->
            <div class="left textaligncenter">
                <!-- <el-input class="search-input" placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
                <el-tree  class="filter-tree"
                    :data="data"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                    ref="tree">
                </el-tree>
            </div>
            <!-- 员工列表 -->
            <div class="middle textaligncenter" v-loading="loading">
                <el-input class="search-input" v-model="staffName" placeholder="输入关键字进行过滤"></el-input>
                <div class="textalignleft">
                    <!-- <div class="node-name" v-text="nodeName"></div> -->
                    <div class="staff-name" v-if="filterData.length > 0">
                        <el-radio-group 
                            v-for="item in filterData" 
                            :key="item.F_UserId"
                            v-model="userName"
                            @change="selectStaff(item)" >
                                <el-radio class="staff-name-items staff-name1" 
                                    :label="item.F_RealName" :value="item.F_UserId">{{item.F_RealName}}
                                </el-radio>
                        </el-radio-group>
                    </div>
                    <div class="nodata" v-else>
                        <img src="../../assets/flowlist/no-data.png">
                    </div>
                </div>
            </div>
            <!-- 已选人员 -->
            <div class="right">
                <div class="node-name">已选人员：</div>
                <div class="selected-staff-box" v-if="selectData && selectData.length > 0">
                    <a @click="deleteStaff" class="selected-people" v-for="(item,index) in selectData" :key="index">
                    {{item.F_RealName}}<i slot="suffix" class="el-icon-close fontsize16"></i></a>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="determine">确 定</el-button>
            <el-button @click="determine">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>

import { getCompanyDepartments } from "@/api/organization/department";
import { getCompaniesUserList} from "@/api/organization/user";
import { event } from 'min-dom';
export default {
    name: 'staffSelector',
    data(){
        return{
            dialogVisible:false,
            filterText: '',
            data: [],
            userId:'',
            defaultProps: {
                children: 'children',
                label: 'F_FullName'
            },
            nodeName:'',
            Department_Id:'',
            Company_Id:'',
            staffList:[],
            filterData:[],
            loading:false,
            selectData:[],
            staffName:'',
            userName:'',
            options: [],
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        staffName(val){
            if(val){
                this.filterData = this.staffList.filter(e=>e.F_RealName.includes(val))
            }else{
                this.filterData = this.staffList
            }
        }
    },
    methods:{
        handleFocus(){
            this.dialogVisible = true
            this.getNodeData()
        },
        filterNode(value, data) {
            if (!value) return true;
            console.log('data',data);
            return data.F_FullName.indexOf(value) !== -1;
        },
        handleNodeClick(data){
            if(data.F_FullName)this.nodeName = data.F_FullName
            this.Department_Id = data.F_DepartmentId//部门id
            this.Company_Id = data.F_CompanyId//公司id
            this.getUserList()
        },
        async getNodeData(){
          let result =  await getCompanyDepartments()
          if(result.data.success){
            this.data = result.data.data
          }
        },
        getUserList(){
            let self = this
            let params = {
                Company_Id: this.Company_Id,//公司id
                limit: 1,//当前页
                size: 200,//每页显示大小
                Keyword: '',//关键字
                Department_Id: this.Department_Id,//部门id
            }
            this.loading = true
            getCompaniesUserList(params).then(res =>{
               if(res.data.success){
                    self.loading = false
                    self.staffList = res.data.data.Rows
                    self.filterData = self.staffList
                }
            })

        },
        selectStaff(item){
            this.selectData = []
            this.selectData.push(item)
        },
        deleteStaff(){
            this.selectData = []
        },
        del(){
            this.selectData = []
            this.$emit('del','')
        },
        determine(){
            if(this.selectData && this.selectData.length == 1){
                this.userId = this.selectData[0].F_UserId
                this.$emit('transmissionData',this.userId)
            }
            this.dialogVisible = false
            
        }
    }
}
</script>
<style scoped>
.select-personal{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
}
.left,.middle,.right{
    width: 33.33333%;
    height: 100%;
    border-right: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    overflow: scroll;
}
.textaligncenter{
    text-align: center;
}
.textalignleft{
    text-align: left;
}
::v-deep .el-dialog__body{
    padding:0 0 10px 0!important;
}
.search-input{
    width: 90%;
    height: 36px;
    margin-top: 10px;
}
.node-name{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #606266;
    line-height: 28px;
    margin-top: 10px;
    margin-left: 32px;
}
.selected-staff-box{
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 10px;
}
.selected-staff-box:hover{
    cursor: pointer;
}
.selected-people{
    padding: 7px 18px;
    background: #EEEEEE;
    border-radius: 2px;

}
.staff-name{
    color: #606266;
    margin-top: 10px;
    border-radius:4px;
}
.staff-name1:hover{
    background: #e5f1ff;
}
.staff-name-items{
    margin-left: 32px;
    margin-top: 8px;
}
.selected-staff{
    width: 80px;
    height: 30px;
    background: #EEEEEE;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #444444;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selected-staff:hover{
    cursor: pointer;
}
.fontsize16{
    margin-left: 8px;
}
::v-deep .el-radio-group{
    display: block!important;
    margin-top: 15px;
}
.nodata{
    margin-left: 32px;
    text-align: center;
}
.nodata > img{
    margin-top: 150px;
}
.departnames{
    width: 100%;
    height: 36px;
    border:1px solid #DCDFE6;
    border-radius: 4px; 
    opacity: 0.8;
    display: flex;
    flex-direction: row;
}
.departnames:hover{
    cursor: pointer;
    opacity: 1;
}
.icon-jiantou{
    width: 5%;
    height: 36px;
    text-align: right;
}
.icon-jiantou::after{
    content: '';
    display: inline-block;
    height: 100%;
    width: 1px;
    vertical-align: middle;
}
.icon-jiantou>img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.staff-info{
    width: 95%;
    height: 36px;
}
.plachcholder-text{
    color: #606266;
    text-indent: 1em;
    opacity: 0.6;
}
</style>
